<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Rotation Raster</title>
	<link rel="stylesheet" href="../css/style.css">
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		var raster = new Raster('lenna');
		var size = new Size(50, 50);
		var colSize = raster.size / size * 1.5;
		var fullSize = size * colSize;

		raster.visible = false;
		raster.size = size;
		for (var x = 0; x < size.width; x++) {
			for (var y = 0; y < size.height; y++) {
				var color = raster.getPixel(x, y);
				var gray = (1 - color.gray) * 0.9;
				if (gray > 0.1) {
					var pos = new Point(x, y) * colSize + colSize / 2;
					var rectSize = gray * colSize.width;
					var path = new Path.Rectangle([0, 0], [rectSize, rectSize]);
					path.fillColor = color;
					path.position = pos;
					path.rotate(gray * 180);
				}
			}
		}
		project.activeLayer.position = view.center;

		// Reposition the paths whenever the window is resized:
		function onResize(event) {
			project.activeLayer.position = view.center;
		}
	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
	<img width="512" height="512" id="lenna" style="display: none;" src="" />
</body>
</html>
